<template>
	<div class="controlIndexContent">
		<div class="screenDatas">
			<div class="screenDatasTree">
				<div class="screenDatasTreeTitle">数据统计</div>
				<div class="screenDatasTreeContent">
					<!-- <TreeList :list="treeList" :cocnfig="defaultProps" :handleNode="treeListNodeClick"></TreeList> -->
					<div class="identificationBox">
						<div class="itemBox">
							<div class="itemBoxLeft">
								<img src="../../../assets/icon/1.jpg" alt="" />
							</div>
							<div class="itemBoxRight">
								<div class="itemBoxRightNumber">4321</div>
								<div class="itemBoxRightFont">终端总量</div>
							</div>
						</div>
						<div class="itemBox">
							<div class="itemBoxLeft">
								<img src="../../../assets/icon/2.jpg" alt="" />
							</div>
							<div class="itemBoxRight">
								<div class="itemBoxRightNumber">4321</div>
								<div class="itemBoxRightFont">离线终端</div>
							</div>
						</div>
						<div class="itemBox">
							<div class="itemBoxLeft">
								<img src="../../../assets/icon/3.jpg" alt="" />
							</div>
							<div class="itemBoxRight">
								<div class="itemBoxRightNumber">321</div>
								<div class="itemBoxRightFont">今日运维</div>
							</div>
						</div>
						<div class="itemBox">
							<div class="itemBoxLeft">
								<img src="../../../assets/icon/4.jpg" alt="" />
							</div>
							<div class="itemBoxRight">
								<div class="itemBoxRightNumber">4321</div>
								<div class="itemBoxRightFont">今日告警</div>
							</div>
						</div>
						<div class="itemBox">
							<div class="itemBoxLeft">
								<img src="../../../assets/icon/5.jpg" alt="" />
							</div>
							<div class="itemBoxRight">
								<div class="itemBoxRightNumber">4321</div>
								<div class="itemBoxRightFont">未下策略</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="screenDatasEchart" id="mapCoordinate"></div>
			<!-- <div class="identification">
				<div class="identificationBox">
					<div class="itemBox">
						<div class="itemBoxLeft">
							<img src="../../../assets/icon/1.jpg" alt="" />
						</div>
						<div class="itemBoxRight">
							<div class="itemBoxRightNumber">4321</div>
							<div class="itemBoxRightFont">终端总量</div>
						</div>
					</div>
					<div class="itemBox">
						<div class="itemBoxLeft">
							<img src="../../../assets/icon/2.jpg" alt="" />
						</div>
						<div class="itemBoxRight">
							<div class="itemBoxRightNumber">4321</div>
							<div class="itemBoxRightFont">离线终端</div>
						</div>
					</div>
					<div class="itemBox">
						<div class="itemBoxLeft">
							<img src="../../../assets/icon/3.jpg" alt="" />
						</div>
						<div class="itemBoxRight">
							<div class="itemBoxRightNumber">321</div>
							<div class="itemBoxRightFont">今日运维</div>
						</div>
					</div>
					<div class="itemBox">
						<div class="itemBoxLeft">
							<img src="../../../assets/icon/4.jpg" alt="" />
						</div>
						<div class="itemBoxRight">
							<div class="itemBoxRightNumber">4321</div>
							<div class="itemBoxRightFont">今日告警</div>
						</div>
					</div>
					<div class="itemBox">
						<div class="itemBoxLeft">
							<img src="../../../assets/icon/5.jpg" alt="" />
						</div>
						<div class="itemBoxRight">
							<div class="itemBoxRightNumber">4321</div>
							<div class="itemBoxRightFont">未下策略</div>
						</div>
					</div>
				</div>
			</div> -->
			<div class="legend">
				<div class="legendName">
					<div class="legendNameData">图例</div>
				</div>
				<div class="legendContent">
					<div class="legendContentData">
						<div class="legendContentDataItem">
							<div class="legendContentDataItemLeftColor1"></div>
							<div class="legendContentDataItemRightFont">终端离线</div>
						</div>
						<div class="legendContentDataItem">
							<div class="legendContentDataItemLeftColor2"></div>
							<div class="legendContentDataItemRightFont">终端告警</div>
						</div>
						<div class="legendContentDataItem">
							<div class="legendContentDataItemLeftColor3"></div>
							<div class="legendContentDataItemRightFont">正在运维</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cardDatas">
			<div class="cardDatasSpeedy">
				<div class="cardDatasSpeedyTitle">快捷操作</div>
				<div class="cardDatasSpeedyContent">
					<div class="cardDatasSpeedyItem">
						<span>快速下发策略</span>
						<wj-Button type="info" @click="quickIssueStrategy">立即进行</wj-Button>
					</div>
					<div class="cardDatasSpeedyItem">
						<span>快速终端准入</span>
						<wj-Button type="info" @click="quickTerminalAdmittance">立即进行</wj-Button>
					</div>
					<div class="cardDatasSpeedyItem">
						<span>快速平台准入</span>
						<wj-Button type="info" @click="quickPlatformAdmittance">立即进行</wj-Button>
					</div>
				</div>
			</div>
			<div class="cardDatasRoll">
				<div class="cardDatasEvery">
					<CardScroll :title="'实时告警'" :list="waringList" :handleLook="waringHandle"></CardScroll>
				</div>
				<div class="cardDatasEvery">
					<CardScroll :title="'派单中'" :list="operationList" :handleLook="operationHandle"></CardScroll>
				</div>
				<div class="cardDatasEvery">
					<CardScroll :title="'终端已离线'" :list="offlineList" :handleLook="offlineHandle"></CardScroll>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// import { control_terminalGroup } from "@/utils/request/api";
import CardScroll from "@/views/common/CardScroll";
// import TreeList from "@/views/common/TreeList";
export default {
	name: "ControlIndex",
	components: {
		CardScroll,
		// TreeList,
	},
	data() {
		return {
			// 实时告警列表
			waringList: [
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-005",
				}
			],
			// 终端运维中列表
			operationList: [
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-005",
				},
			],
			// 终端已离线列表
			offlineList: [
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-005",
				},
			],
			// // 树形组件列表
			// treeList: [
			// 	// {
			// 	// 	label: "四川高速",
			// 	// 	index: "0",
			// 	// 	children: [
			// 	// 		{
			// 	// 			label: "国家高速(21)",
			// 	// 			index: "1",
			// 	// 			children: [
			// 	// 				{
			// 	// 					label: "1. 首都放射线(1)",
			// 	// 					index: "2",
			// 	// 					children: [
			// 	// 						{
			// 	// 							label: "G5京昆高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 					],
			// 	// 				},
			// 	// 				{
			// 	// 					label: "2. 北南纵线(3)",
			// 	// 					index: "2",
			// 	// 					children: [
			// 	// 						{
			// 	// 							label: "G65包茂高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "G75兰海高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "G85银昆高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 					],
			// 	// 				},
			// 	// 			],
			// 	// 		},
			// 	// 		{
			// 	// 			label: "省级高速(74)",
			// 	// 			index: "1",
			// 	// 			children: [
			// 	// 				{
			// 	// 					label: "1. 成都放射线(8)",
			// 	// 					index: "2",
			// 	// 					children: [
			// 	// 						{
			// 	// 							label: "S1成万渝高速",
			// 	// 							index: "3",
			// 	// 							type: "provincial",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "S2成巴高速",
			// 	// 							index: "3",
			// 	// 							type: "provincial",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "S3天府国际机场高速天府支线",
			// 	// 							index: "3",
			// 	// 							type: "provincial",
			// 	// 						},
			// 	// 					],
			// 	// 				},
			// 	// 				{
			// 	// 					label: "2. 北南纵线(9)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 				{
			// 	// 					label: "3. 东西横线(8)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 				{
			// 	// 					label: "4. 地区环线(2)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 				{
			// 	// 					label: "5. 联络线(48)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 			],
			// 	// 		},
			// 	// 		{
			// 	// 			label: "国家高速(21)",
			// 	// 			index: "1",
			// 	// 			children: [
			// 	// 				{
			// 	// 					label: "1. 首都放射线(1)",
			// 	// 					index: "2",
			// 	// 					children: [
			// 	// 						{
			// 	// 							label: "G5京昆高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 					],
			// 	// 				},
			// 	// 				{
			// 	// 					label: "2. 北南纵线(3)",
			// 	// 					index: "2",
			// 	// 					children: [
			// 	// 						{
			// 	// 							label: "G65包茂高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "G75兰海高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "G85银昆高速",
			// 	// 							index: "3",
			// 	// 							type: "country",
			// 	// 						},
			// 	// 					],
			// 	// 				},
			// 	// 			],
			// 	// 		},
			// 	// 		{
			// 	// 			label: "省级高速(74)",
			// 	// 			index: "1",
			// 	// 			children: [
			// 	// 				{
			// 	// 					label: "1. 成都放射线(8)",
			// 	// 					index: "2",
			// 	// 					children: [
			// 	// 						{
			// 	// 							label: "S1成万渝高速",
			// 	// 							index: "3",
			// 	// 							type: "provincial",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "S2成巴高速",
			// 	// 							index: "3",
			// 	// 							type: "provincial",
			// 	// 						},
			// 	// 						{
			// 	// 							label: "S3天府国际机场高速天府支线",
			// 	// 							index: "3",
			// 	// 							type: "provincial",
			// 	// 						},
			// 	// 					],
			// 	// 				},
			// 	// 				{
			// 	// 					label: "2. 北南纵线(9)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 				{
			// 	// 					label: "3. 东西横线(8)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 				{
			// 	// 					label: "4. 地区环线(2)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 				{
			// 	// 					label: "5. 联络线(48)",
			// 	// 					index: "2",
			// 	// 				},
			// 	// 			],
			// 	// 		},
			// 	// 	],
			// 	// },
			// ],
			// // 树形组件配置
			// defaultProps: {
			// 	children: "children",
			// 	label: "groupName",
			// },
		};
	},
	create() {},
	mounted() {
		this.initMapCoordinate();
		// this.getTreeListNodeData();
	},
	methods: {
		// 实时告警——查看全部
		waringHandle() {
			console.log("实时告警——查看全部");
		},
		// 终端运维中——查看全部
		operationHandle() {
			console.log("终端运维中——查看全部");
		},
		// 终端已离线——查看全部
		offlineHandle() {
			console.log("终端已离线——查看全部");
		},
		// 快速下发策略
		quickIssueStrategy() {
			console.log("快速下发策略");
		},
		// 快速终端准入
		quickTerminalAdmittance() {
			console.log("快速终端准入");
		},
		// 快速平台准入
		quickPlatformAdmittance() {
			console.log("快速平台准入");
		},
		// // 树形组件节点点击事件
		// treeListNodeClick(data) {
		// 	console.log(data);
		// },
		// // 树形组件数据获取
		// getTreeListNodeData() {
		// 	control_terminalGroup().then((res) => {
		// 		console.log(res);
		// 		res.data.forEach((element) => {
		// 			this.treeList.push(element);
		// 		});
		// 	});
		// },
		// 散点图  横经纵纬  最高纬度34.425796/26.017047  最高经度108.522548/97.291922
		initMapCoordinate() {
			var chartDom = document.getElementById("mapCoordinate");
			var myChart = this.$echarts.init(chartDom);
			var option = {
				xAxis: {
					show: false,
					type: "value",
					max: 108.522548, //最大值
					min: 97.291922, //最小值
				},
				yAxis: {
					show: false,
					type: "value",
					max: 34.425796, //最大值
					min: 26.017047, //最小值
				},
				grid: {
					left: 215,
					top: 1,
					right: 250,
					bottom: 1,
				},
				series: [
					{
						symbolSize: 15,
						itemStyle: {
							normal: {
								color: function (params) {
									//根据不同数据显示不同颜色的标记
									console.log("------", params);
									if (params.data[2] == "1") {
										return "red";
									} else if (params.data[2] == "2") {
										return "green";
									} else if (params.data[2] == "3") {
										return "blue";
									}
								},
							},
						},
						data: [
							[103.036908, 29.958543, "1"],
							[104.792709, 29.271074, "2"],
							[105.820032, 32.430533, "3"],
						],
						type: "scatter",
					},
				],
			};

			option && myChart.setOption(option);
		},
	},
};
</script>
<style lang="less" scoped>
.controlIndexContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.screenDatas {
		width: 100%;
		height: 70%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		.screenDatasTree {
			width: 18%;
			height: 100%;
			background: #ffffff;
			margin-right: 2px;
			box-sizing: border-box;
			padding: 12px;
			.screenDatasTreeTitle {
				width: 100%;
				font-size: 18px;
				height: 18px;
				line-height: 1;
				margin-bottom: 12px;
			}
			.screenDatasTreeContent {
				width: 100%;
				height: calc(100% - 18px - 12px);
				overflow: hidden;
				.identificationBox {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					.itemBox {
						width: 100%;
						height: 18%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						.itemBoxLeft {
							width: 40%;
							height: 100%;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.itemBoxRight {
							width: 60%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.itemBoxRightNumber {
								font-size: 28px;
								// color: #f3f30a;
								margin-bottom: 4px;
							}
							.itemBoxRightFont {
								font-size: 16px;
								color: #606266;
							}
						}
					}
				}
			}
		}
		.screenDatasEchart {
			width: 82%;
			height: 100%;
			background-image: url("../../../assets/sichuan4.jpg");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		/*
		.identification {
			width: 1106px;
			height: 80px;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 99;
			.identificationBox {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.itemBox {
					width: 20%;
					height: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					.itemBoxLeft {
						width: 40%;
						height: 100%;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.itemBoxRight {
						width: 60%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.itemBoxRightNumber {
							font-size: 28px;
							color: #f3f30a;
							margin-bottom: 4px;
						}
						.itemBoxRightFont {
							font-size: 16px;
							color: #606266;
						}
					}
				}
			}
		}
		*/
		.legend {
			width: 200px;
			height: 100px;
			background: #ffffff;
			position: absolute;
			right: 20px;
			bottom: 10px;
			z-index: 99;
			.legendName {
				width: 30%;
				height: 100%;
				padding: 8px 0;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				.legendNameData {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 16px;
				}
			}
			.legendContent {
				width: 70%;
				height: 100%;
				padding: 8px 0;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				right: 0;
				.legendContentData {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					.legendContentDataItem {
						width: 100%;
						height: 30%;
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: center;
						.legendContentDataItemLeftColor1 {
							width: 40px;
							height: 24px;
							background: #b9b9b9;
						}
						.legendContentDataItemLeftColor2 {
							width: 40px;
							height: 24px;
							background: #ee1e1e;
						}
						.legendContentDataItemLeftColor3 {
							width: 40px;
							height: 24px;
							background: #70b603;
						}
						.legendContentDataItemRightFont {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
	.cardDatas {
		width: 100%;
		height: 30%;
		margin-top: 2px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.cardDatasSpeedy {
			width: 18%;
			height: 100%;
			box-sizing: border-box;
			background: #ffffff;
			margin-right: 2px;
			padding: 8px 12px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			.cardDatasSpeedyTitle {
				width: 100%;
				height: 24px;
				line-height: 1;
				font-size: 18px;
				margin-bottom: 12px;
			}
			.cardDatasSpeedyContent {
				width: 100%;
				height: calc(100% - 24px - 12px);
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				.cardDatasSpeedyItem {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					font-size: 16px;
					/deep/ .wj-button-info {
						padding: 8px 12px;
					}
				}
			}
		}
		.cardDatasRoll {
			width: 82%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.cardDatasEvery {
				width: 33.33%;
				height: 100%;
				margin-right: 2px;
			}
			.cardDatasEvery:last-child {
				margin-right: 0;
			}
		}
	}
}
</style>
